<template>
  <div id="store-data-large">
    <div class="top-box" :style="{'background-image': `url(${store_screen_3})`}"><div class="top-name">{{allData.screen_name}}</div></div>
    <div class="content-box" v-if = "info">
      <leftBox :allData="allData" :ininValue="ininValue" @dateType="dateType"></leftBox>
      <middleBox :allData="allData" :ininValue="ininValue"></middleBox>
      <rightBox :allData="allData" :ininValue="ininValue"></rightBox>
    </div>
  </div>
</template>

<script>
import index_controller from "./index_controller";

export default index_controller;
</script>

<style>
#app {
  height: 100%;
}
#appMain {
  height: 100%;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#store-data-large {
  background: #050F27;
  height: 100%;
  position: fixed;
  width: 100%;
  .top-box {
    background-size: 100% 100%; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    // background-position: center; /* 背景图片居中 */
    width: 100%; /* 元素宽度 */
    height: 15vh;
    .top-name {
      color: white;
      font-size: 1.6rem;
      line-height: 2.5;
    }
  }
  
  .content-box {
    display: flex;
    padding: 0 2rem;
    position: relative;
    top: -3vh;

  }
}
</style>
